<template>
    <div class="app-container">
        <Levelbar></Levelbar>
        <TableLayout form-title="">
            <!-- <div slot="form-title" class="table-title"></div> -->
            <el-form :model="query" ref="query" :rules="rules" slot="form" label-width="75px" label-position="right" v-collapse="true">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="省份" prop="provinceId">
                            <province v-model="query.provinceId"></province>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="市区" prop="cityId">
                            <city v-model="query.cityId" :province="query.provinceId"></city>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="区县" prop="areaId">
                            <region v-model="query.areaId" :city="query.cityId"></region>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称" prop="schoolName">
                            <school v-model="query.schoolName" :provinceId="query.provinceId" :cityId="query.cityId" :areaId="query.areaId" style="width:100%" @change='getSchoolItem'></school>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="经销商">
                            <el-input v-model="query.orguserName" style="width:100%" placeholder="请输入经销商"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="query.phone" style="width:100%" placeholder="请输入手机号" :maxlength="11"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="审核状态">
                            <el-select v-model="query.start" placeholder="请选择" style="width:100%">
                                <el-option v-for="item in query.options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="申请日期">
                            <el-row>  
                                <el-col :span="11">
                                    <start-date v-model="query.startDate" :clearable="true" :picker-options="query.pickerOptions1" :end-date-options.sync="query.pickerOptions2" :state="false"></start-date>
                                </el-col>
                                <el-col :span="2" align="center">至</el-col>
                                <el-col :span="11">
                                    <end-date v-model="query.endDate" :clearable="true" :picker-options="query.pickerOptions2" :start-date-options.sync="query.pickerOptions1" :state="false"></end-date>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-col>
                </el-row>
                <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit('query')">查询</el-button>
                </div>
            </el-form>
            <div class="table-title" slot="table-title"></div>
            <el-table :data="tableData" border v-loading="loading" style="width: 100%">
                <el-table-column type="index" width="50" label="序号" align="center"></el-table-column>
                <el-table-column label="所属省市区" align="center" prop="provinceName">
                    <template scope="scope">
                        {{scope.row.provinceName}}{{scope.row.cityName ? `-${scope.row.cityName}` : ''}}{{scope.row.areaName ? `-${scope.row.areaName}` : ''}}
                    </template>
                </el-table-column>
                <el-table-column label="经销商" align="center" prop="orguserName"></el-table-column>
                <el-table-column label="手机号" align="center" prop="phone"></el-table-column>
                <el-table-column label="学校名称" align="center" prop="schoolName"></el-table-column>
                <el-table-column label="收费项" align="center" prop="serviceName"></el-table-column>
                <el-table-column label="市场指导价" align="center" prop="marketPrice">
                    <template scope="scope">
                        <div v-if="scope.row.marketPrice">
                            <p v-if="scope.row.marketPrice[0].name">月：{{scope.row.marketPrice[0].price | moneySwitch}}</p>
                            <p v-if="scope.row.marketPrice[1].name">半年：{{scope.row.marketPrice[1].price | moneySwitch}}</p>
                            <p v-if="scope.row.marketPrice[2].name">年：{{scope.row.marketPrice[2].price | moneySwitch}}</p>
                        </div>
                        <div v-else>--</div>
                    </template>
                </el-table-column>
                <el-table-column label="当前售价" align="center" prop="nowPrice">
                    <template scope="scope">
                        <div v-if="scope.row.nowPrice">
                            <p v-if="scope.row.nowPrice[0].name" :class="~~scope.row.nowPrice[0].price > ~~scope.row.marketPrice[0].price ? 'red':~~scope.row.nowPrice[0].price < ~~scope.row.marketPrice[0].price ? 'green':''">月：{{scope.row.nowPrice[0].price | moneySwitch}}</p>
                            <p v-if="scope.row.nowPrice[1].name" :class="~~scope.row.nowPrice[1].price > ~~scope.row.marketPrice[1].price ? 'red':~~scope.row.nowPrice[1].price < ~~scope.row.marketPrice[1].price ? 'green':''">半年：{{scope.row.nowPrice[1].price | moneySwitch}}</p>
                            <p v-if="scope.row.nowPrice[2].name" :class="~~scope.row.nowPrice[2].price > ~~scope.row.marketPrice[2].price ? 'red':~~scope.row.nowPrice[2].price < ~~scope.row.marketPrice[2].price ? 'green':''">年：{{scope.row.nowPrice[2].price | moneySwitch}}</p>
                        </div>
                        <div v-else>--</div>
                    </template>
                </el-table-column>
                <el-table-column label="申请调后价" align="center" prop="readyPrice">
                    <template scope="scope">
                        <div v-if="scope.row.readyPrice">
                            <p v-if="scope.row.readyPrice[0].name" :class="~~scope.row.readyPrice[0].price > ~~scope.row.marketPrice[0].price ? 'red':~~scope.row.readyPrice[0].price < ~~scope.row.marketPrice[0].price ? 'green':''">月：{{scope.row.readyPrice[0].price | moneySwitch}}</p>
                            <p v-if="scope.row.readyPrice[1].name" :class="~~scope.row.readyPrice[1].price > ~~scope.row.marketPrice[1].price ? 'red':~~scope.row.readyPrice[1].price < ~~scope.row.marketPrice[1].price ? 'green':''">半年：{{scope.row.readyPrice[1].price | moneySwitch}}</p>
                            <p v-if="scope.row.readyPrice[2].name" :class="~~scope.row.readyPrice[2].price > ~~scope.row.marketPrice[2].price ? 'red':~~scope.row.readyPrice[2].price < ~~scope.row.marketPrice[2].price ? 'green':''">年：{{scope.row.readyPrice[2].price | moneySwitch}}</p>
                        </div>
                        <div v-else>--</div>
                    </template>
                </el-table-column>
                <el-table-column label="申请时间" align="center" prop="checkTimeFrom">
                    <template scope="scope">
                        {{scope.row.checkTime || '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" align="center" prop="checkStatus">
                    <template scope="scope">
                        {{scope.row.checkStatus == 0 ? '未审核' : scope.row.checkStatus == 1 ? '审核通过' : scope.row.checkStatus == 2 ? '审核驳回' : '--'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template scope="scope">
                        <el-button v-if="scope.row.checkStatus == 0" type="text" class="btn-success" @click="btnset(scope.row)">审核</el-button>
                        <el-button v-else type="text" class="btn-success" @click="btnget(scope.row)">查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="pageQuery.total" :current-page.sync="pageQuery.currentpage" :page-sizes="config.pageSizes" :page-size="config.pageSize" @size-change="handleSizeChange" @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import Levelbar from '../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import school from 'components/SchoolClasss/school';
import { pageMembershipAgentService } from 'api/newServiceAudit';
import { mapState, mapActions } from 'vuex';
import startDate from 'components/Datepicker/startDate';
import endDate from 'components/Datepicker/endDate';
import validate from '@/utils/validate';
export default {
    name: 'newServiceAudit',
    components: {
        Levelbar,
        TableLayout,
        province,
        city,
        region,
        school,
        startDate,
        endDate
    },
    data() {
        return {
            rules: {
                phone: [...validate.phone()]
                
            },
            auditData: {
                dialogState: false,
                dataList: ''
            },
            loading: true,
            schoolList: [],
            tableData: [
                {
                    marketPrice: [
                        {
                            price: ''
                        },
                        {
                            price: ''
                        },
                        {
                            price: ''
                        }
                    ],
                    readyPrice: [
                        {
                            price: ''
                        },
                        {
                            price: ''
                        },
                        {
                            price: ''
                        }
                    ],
                    nowPrice: [
                        {
                            price: ''
                        },
                        {
                            price: ''
                        },
                        {
                            price: ''
                        }
                    ]
                }
            ],
            pageQuery: {
                currentpage: 1,
                total: 0
            },
            query: {
                provinceId: '',
                cityId: '',
                areaId: '',
                schoolId: '',
                schoolName: '',
                orguserName: '',
                phone: '',
                start: '',
                startDate: '',
                endDate: '',
                options: [
                    {
                        value: '',
                        label: '请选择'
                    },
                    {
                        value: '0',
                        label: '未审核'
                    },
                    {
                        value: '1',
                        label: '审核通过'
                    },
                    {
                        value: '2',
                        label: '审核驳回'
                    }
                ],
                pickerOptions1: {},
                pickerOptions2: {}
            }
        };
    },
    watch: {// 局部刷新列表
        cacheUpdated(val) {
            console.log(val, '-------------')
            val && this.queryData();
        }
    },
    created() {
        this.queryData();
    },
    computed: {
        ...mapState({
            config: state => state.config.table,
            cacheUpdated: state => state.app.cacheUpdated// 局部刷新列表
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.pageQuery.currentpage = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.pageQuery.currentpage = val;
            this.queryData();
        },
        onSubmit(ruleForm) {
            this.$refs[ruleForm].validate((valid) => {
                if (valid) {
                    this.pageQuery.currentpage = 1;
                    this.queryData();
                } else {
                    return false;
                }
            });
            
        },
        queryData() {
            let provinceId = this.query.provinceId; // 省id
            let cityId = this.query.cityId; // 市id
            let areaId = this.query.areaId; // 区id
            let schoolId = this.query.schoolId; // 学校id
            this.loading = true;
            pageMembershipAgentService(
                provinceId, // 省idp
                cityId, // 市id
                areaId, // 区id
                this.query.start,
                this.query.orguserName,
                schoolId, // 学校id
                this.query.phone,
                this.fifterDate(this.query.startDate),
                this.fifterDate(this.query.endDate),
                this.pageQuery.currentpage,
                this.config.pageSize
            )
        .then(response => {
            this.loading = false;
            this.tableData = response.data.content.list;
            this.pageQuery.total = response.data.content.pagination.total;
            for (let i = 0; i < this.tableData.length; i++) {
                this.tableData[i].marketPrice = JSON.parse(
              this.tableData[i].marketPrice
            );
                this.tableData[i].nowPrice = JSON.parse(this.tableData[i].nowPrice);
                this.tableData[i].readyPrice = JSON.parse(
              this.tableData[i].readyPrice
            );
            }
        })
        .catch(() => {
            this.loading = false;
        });
        },
    // 返回年月日时分秒
        fifterDate(date) {
            if (typeof date === 'string') {
                return date;
            } else {
                let month = this.addZero(date.getMonth() + 1 + '');
                let day = this.addZero(date.getDate() + '');
            // let hour = this.addZero(date.getHours() + '');
            // let minutes = this.addZero(date.getMinutes() + '');
            // let seconds = this.addZero(date.getSeconds() + '');
            // return `${date.getFullYear()}-${month}-${day} ${hour}:${minutes}:${seconds}`;
                return `${date.getFullYear()}-${month}-${day}`;
            }
        },
    // 加0
        addZero(str) {
            if (typeof str === 'string') {
                return str.length > 1 ? str : '0' + str;
            }
        },

        getSchoolItem(schoolId) {
            this.query.schoolId = schoolId;
        },
        btnset(v) {
            this.$router.push({ path: `/newServiceAudit/setService/${v.pId}/${v.schoolId}/${v.serviceTypeId}` });
        },
        btnget(v) {
            this.$router.push({ path: `/newServiceAudit/getService/${v.pId}/${v.schoolId}/${v.serviceTypeId}` });
        }
    }
}

</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;

  .app-levelbar {
    height: 35px;
  }
}
.red{
    color: #ff0000
}
.green{
    color: #008000
}
</style>

